<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<table border=1 width="600">
    <thead>
        <tr>
            <th><input type="checkbox" name="selectAll">全选</th>
            <th>商品名称</th>
            <th>商品名称</th>
            <th>商品名称</th>
            <th>商品名称</th>
            <th>商品名称</th>
            <th>商品名称</th>
            <th>商品名称</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" name="selectOne"></td>
            <td>手机</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="selectOne"></td>
            <td>手机</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="selectOne"></td>
            <td>手机</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="selectOne"></td>
            <td>手机</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="selectOne"></td>
            <td>手机</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="selectOne"></td>
            <td>手机</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td><input type="checkbox" name="selectAll">全选</td>
        </tr>
    </tfoot>
</table>
</body>
<script>
var selectAll = document.querySelectorAll('[name="selectAll"]')
var selectOne = document.querySelectorAll('[name="selectOne"]')
selectAll = Array.prototype.slice.call(selectAll)
selectOne = Array.prototype.slice.call(selectOne)
console.log(selectAll);
selectAll.forEach(v=>{
    v.onclick = function(){
        console.log(this.checked);
        if(this.checked){
            selectOne.forEach(item=>{
                item.checked = true
            })
            selectAll.forEach(item=>{
                item.checked = true
            })
            
        }else{
            selectOne.forEach(item=>{
                item.checked = false
            })
            selectAll.forEach(item=>{
                item.checked = false
            })
        }
        // selectOne.forEach(item=>{
        //     item.checked = this.checked
        // })

        // selectAll.forEach(item=>{
        //     item.checked = this.checked
        // })
    }
})

// 每个单选都应该在点击的时候判断，是否所有的单选都选中了，如果是，两个全选也应该选中，否则，两个全选也应该取消
selectOne.forEach(item=>{
    item.onclick = function(){
        var bool = selectOne.every(v=>v.checked)
        console.log(bool);
        selectAll.forEach(item=>{
            item.checked = bool
        })
    }
})

// 伪数组 - 类数组
// var obj = {
//     0:'aa',
//     1:'bbb',
//     length:2
// }
// console.log(obj);

// 常见的伪数组：document.getElementsByTagName()  document.getElementsByClassName()  document.getElementsByName()  document.querySelectorAll()   arguments
// function fn(){
//     // 函数中有一个关键字叫arguments，接收所有的实参
//     console.log(arguments);
//     console.log(arguments[0]);
// }

// fn(1,2,3,4,5)
</script>
</html>